<template>
    <div style='height: 100%;' class="tableBox">
        <div style="position: relative;">
            <vxe-table size="small" ref="vxeTable" border :row-id="rowKey" :data="tabData" :height="height" :checkbox-config="checkConfig" :tree-config="{children: 'children'}" @checkbox-change="selectChangeEvent" @checkbox-all="selectChangeEvent" @sort-change="sortChangeEvent">
                <vxe-table-column type="checkbox" width="80" v-if="showSelection" align='center'></vxe-table-column>
                <vxe-table-column v-for="(val,ind) in columns" show-overflow='title' :key=ind :field="val.key" :align='val.align' :tree-node="val.treeNode" :sortable="val.sortable" :prop="val.prop" :title="val.title" :min-width="val.minWidth" :width="val.width">
                    <template v-slot="{ row }" v-if="val.slot === 'clickable'">
                        <a class="clickItem" @click="$emit('handleDetail', row)">{{row[val.key]}}</a>
                    </template>
                    <template v-slot="{ row }" v-else-if="val.slot === 'custom'">
                        <Icon style="fontSize: 18px;" :type="row.custom" :custom="row.custom" />
                    </template>
                    <template v-slot="{ row }" v-else-if="val.slot === 'icon'">
                        <Icon style="fontSize: 18px;" :type="row.icon" :custom="row.icon" />
                    </template>
                    <template v-slot="{ row }" v-else-if="val.slot ==='mold'">
                        <Tag color="magenta" v-if="row.eduType=='1'">{{row.eduTypeName}}</Tag>
                        <Tag color="red" v-if="row.eduType=='2'">{{row.eduTypeName}}</Tag>
                        <Tag color="volcano" v-if="row.eduType=='3'">{{row.eduTypeName}}</Tag>
                        <Tag color="orange" v-if="row.eduType=='4'">{{row.eduTypeName}}</Tag>
                        <Tag color="gold" v-if="row.eduType=='5'">{{row.eduTypeName}}</Tag>
                        <Tag color="yellow" v-if="row.eduType=='6'">{{row.eduTypeName}}</Tag>
                        <Tag color="lime" v-if="row.eduType=='7'">{{row.eduTypeName}}</Tag>
                        <Tag color="green" v-if="row.eduType=='8'">{{row.eduTypeName}}</Tag>
                        <Tag color="cyan" v-if="row.eduType=='9'">{{row.eduTypeName}}</Tag>
                        <Tag color="magenta" v-if="row.orgType=='1'">{{row.orgTypeName}}</Tag>
                        <Tag color="red" v-if="row.orgType=='2'">{{row.orgTypeName}}</Tag>
                        <Tag color="volcano" v-if="row.orgType=='3'">{{row.orgTypeName}}</Tag>
                    </template>
                    <template v-slot="{ row, index }" v-else-if="val.slot === 'action'">
                        <ul class="moreButton">
                            <li v-for="v in buttonList" :key="v.method">
                                <a @click="$emit(v.method, row, index)">{{v.name}}</a>
                            </li>
                        </ul>
                    </template>
                    <template v-slot='{ row, index }' v-else-if="val.slot === 'otherAction'">
                        <ul class="moreButton">
                            <!-- 正常显示按钮 -->
                            <li v-for="val in buttonList" :key="val.method">
                                <a @click="$emit(val.method, row, index)">{{val.name}}</a>
                            </li>
                            <!-- 技术交底特定按钮 -->
                            <li v-if="technicalDisclosure && row.disclosureStatusCode == '1'">
                                <a @click="$emit('handleCancel', row, index)">作废</a>
                            </li>
                            <li v-if="technicalDisclosure && row.disclosureStatusCode == '2'">
                                <a @click="$emit('handleRestore', row, index)">复原</a>
                            </li>
                        </ul>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
        <!-- 分页 -->
        <div class='flex-box' v-if="showPage">
            <div>共 {{ totalNum || 0 }} 条</div>
            <div>
                <van-pagination v-model="currentPage" :force-ellipses="true" :show-page-size="3" :total-items="totalNum" @change='changePage'>
                    <template #prev-text>
                        <van-icon name="arrow-left" />
                    </template>
                    <template #next-text>
                        <van-icon name="arrow" />
                    </template>
                    <template #page="{ text }">{{ text }}</template>
                </van-pagination>
            </div>
        </div>
        <full-loading v-if="loading"></full-loading>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import { getTabData } from '@/api/common';
    export default {
        props: {
            // 列数据
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 是否显示复选框
            showSelection: {
                type: Boolean,
                default: true
            },
            // 是否显示分页
            showPage: {
                type: Boolean,
                default: true
            },
            // 表格高度
            height: {
                type: Number,
                default: function () {
                    var height = window.innerHeight - 250;
                    return height >= 300 ? height : 300;
                }
            },
            // 按钮
            buttonList: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 条数切换弹窗的展开方向
            placement: {
                type: String,
                default: 'bottom'
            },
            // 表格行数据主键
            rowKey: {
                type: String,
                default: 'id'
            },
            // 是否关联父子级
            checkConfig: {
                type: Object,
                default: function () {
                    return ({ checkStrictly: false })
                }
            },
            // 是否是技术交底页面
            technicalDisclosure: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                loading: false,
                pageSize: 20,
                current: 1,
                totalNum: 100,
                sortType: '', // 当前排序类型，可选值为：normal（默认） || asc（升序）|| desc（降序）,
                sortColumns: '',
                tabData: [],
                searchKey: {},
                urlName: ''
            };
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            // 开始展示条数
            start () {
                return this.pageSize * (this.current - 1) + 1;
            },
            // 截至展示条数
            end () {
                return this.pageSize * this.current > this.totalNum
                    ? this.totalNum
                    : this.pageSize * this.current;
            }
        },
        methods: {
            // 获取查询条件及请求路径
            getSearch (data, url) {
                if (!url) {
                    return;
                }
                this.searchKey = data;
                this.urlName = url;
                this.current = 1;
                this.pageSize = 20;
                this.getData(this.searchKey);
                this.$emit('start');
            },
            // 获取表格数据
            getData (obj) {
                var data = { ...obj };
                if (this.showPage) {
                    data.pageNum = this.current;
                    data.pageSize = this.pageSize;
                }
                if (this.sortColumns && this.sortType) {
                    data.sort = this.sortColumns;
                    data.direction = this.sortType;
                }
                this.tabData = [];
                this.loading = true;
                this.$emit('changeSelect', [], this.current);
                this.totalNum = 0;
                this.$refs.vxeTable.clearCheckboxRow();
                getTabData(this.urlName + this.switchData(data)).then(res => {
                    this.loading = false;
                    if (res.status === '200') {
                        if (this.showPage) {
                            this.totalNum = res.data.total;
                            this.tabData = res.data.list;
                        } else {
                            this.totalNum = res.data.length;
                            this.tabData = res.data;
                        }
                        setTimeout(() => {
                            this.$emit('finished', true);
                        }, 200)
                    } else {
                        // this.$Notify({ type: 'warning', message: res.msg });
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 初始化
            initialize () {
                this.pageSize = 20;
                this.current = 1;
                this.totalNum = 0;
                this.$refs.vxeTable.clearCheckboxRow();
            },
            // 序列化参数
            switchData (obj) {
                var str = '?';
                for (var key in obj) {
                    str += `${key}=${obj[key]}&`
                }
                return str.slice(0, -1);
            },
            // 改变页数，重新获取数据
            changePage () {
                this.getData(this.searchKey);
            },
            // 改变每页条数
            changePageSize (size) {
                this.pageSize = size;
                this.getData(this.searchKey);
                this.$emit('start');
            },
            // 设置表格默认选中
            setChecked (strId) {
                var array = strId.split(',');
                var CheckRow = [];
                for (let i = 0; i < array.length; i++) {
                    var obj = this.$refs.vxeTable.getRowById(array[i]);
                    if (obj) {
                        CheckRow.push(obj);
                    }
                }
                this.$refs.vxeTable.setCheckboxRow(CheckRow, true);
                this.$emit('changeSelect', CheckRow, this.current);
            },
            // 改变复选框
            selectChangeEvent ({ records }) {
                this.$emit('changeSelect', records, this.current);
            },
            // 表头排序
            sortChangeEvent ({ column, property, order }) {
                if (order) {
                    this.sortType = order;
                    this.sortColumns = column.prop || property;
                } else {
                    this.sortType = '';
                    this.sortColumns = '';
                }
                this.current = 1;
                this.pageSize = 20;
                this.getData(this.searchKey);
            },
            linkEvent (row) {
                this.$emit('handleDetail', row);
            }
        }
    }
</script>

<style scoped lang='less'>
    .flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-top: 15px;
        padding: 16px;
    }
    .flex-box-mobile {
        justify-content: center;
    }
    .moreButton {
        display: flex;
        justify-content: center;
        li {
            list-style: none;
            span {
                cursor: pointer;
            }
            margin: 0 5px;
        }
        a {
            color: #00a9ff;
        }
    }
    .tableBox /deep/.vxe-cell--title {
        font-size: 12px;
    }
    .tableBox .clickItem {
        color: #00a9ff;
    }
</style>
